<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<div id="demo"></div>
<div id="app"></div>
<script>
    function delay() {
        var deferred = $.Deferred();
        console.log("delay message!");
        setTimeout(()=> {
            console.log("delay message!");
            deferred.resolve({data: "data"});
        }, 1000);
        return deferred.promise();
    }

    function delay2() {
        var deferred = $.Deferred();
        console.log("delay2 message!");
        setTimeout(()=> {
            console.log("delay2 message!");
            deferred.resolve();
        }, 2000);
        return deferred.promise();
    }

    function noDelay() {
        console.log("no delay message!");
    }

    function run() {
        var promise = $.Deferred().resolve();
        return promise.then(()=> {
            return delay();
        }).then(()=> {
            return delay2();
        }).done(()=> {
            console.log("run over");
        });
    }

    run().done(()=>{
        console.log("run done");
    });
</script>
</body>
</html>